<template>
  <view class="body">
    <GoodsListTab :tabsList="tabsList" @onChange="onChange" />
    <view class="orders">
      <view class="order_item" v-for="item in orders" :key="item.order_id">
        <view class="order_row">
          <view class="title number">订单编号</view>
          <text class="text">{{item.order_number}}</text>
        </view>
        <view class="order_row">
          <view class="title money">订单金额</view>
          <text class="text price">{{item.order_price}}</text>
        </view>
        <view class="order_row">
          <view class="title date">订单日期</view>
          <text class="text">{{item.update_time_format}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import GoodsListTab from "@/components/GoodsListTab";
import { getOrder } from "@/api/order";
import dayjs from 'dayjs'
export default {
  components: {
    GoodsListTab,
  },
  data() {
    return {
      tabsList: [
        { id: 1, type: 1, name: "全部" },
        { id: 2, type: 2, name: "待付款" },
        { id: 3, type: 3, name: "待发货" },
      ],
      type: 1,
      orders:[]
    };
  },
  onLoad() {
    this.getOrder();
  },
  methods: {
    async getOrder() {
      this.orders = (await getOrder({ type: this.type })).data.message.orders.map(item=>({...item,update_time_format:dayjs(item.update_time * 1000).format('YYYY-MM-DD HH:mm:ss')}));
    },
    onChange(index) {
      this.type = this.tabsList[index].type;
      this.getOrder();
    },
  },
};
</script>

<style lang="less">
.body{
  width: 100vw;
  min-height: 100vh;
  background-color: #f9f9f9;
  .orders{
    margin: 10rpx 20rpx 0;
    .order_item{
      width: 100%;
      height: 250rpx;
      background-color: #fff;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-bottom: 20rpx;
      .order_row{
        padding: 0 30rpx;
        display: flex;
        justify-content: space-between;
        .title{
          font-size: 30rpx;
          color: #696969;
        }
        .text{
          font-size: 30rpx;
          color: #434343;
        }
      }
    }
  }
}
</style>